<template>
  <div class="user-container">
    <div class="user-header">
      <el-image style="width: 100px; height: 100px" :src= "require('@/assets/header_images/userManage.png')"></el-image>
      <!--此处有报错，还缺了个src='' 没有插入图片的url-->
      <div class="title">
        用户管理
        <div class="title-content">对系统用户账户及其权限进行创建、维护、删除等过程的统一管理，确保系统安全性、
数据完整性和用户访问合规性</div>
      </div>
    </div>
    <div class="user-info">
      <div class="user-operate">
        <span class="keyword">关键词：</span>
        <el-input placeholder="请输入用户名、角色" style="width: 20%;" clearable v-model="searchKeyword" @input="handleSearch">
        </el-input>
        <!-- <el-button icon="el-icon-search" circle @click="handleSearch"></el-button> -->
        <div class="right-menu">
          <el-button style="width: 100px;background:#304156;color: #fff;" type="primary" plain @click="handleRefresh">刷新</el-button>
          <el-button style="width: 100px;background:#304156;color: #fff;" type="primary" plain @click="handleAddUser">添加</el-button>
        </div>
        <el-button v-if="multipleSelection.length" type="danger" @click="deleteSelectedRow"
          style="margin-left: 20px;width: 100px; ">删除</el-button>
          <el-button v-if="multipleSelection.length" type="danger" @click="forbidUserStatus"
            style="margin-left: 20px;width: 100px;" :disabled="currentUser.userStatus === 1">禁用</el-button>
          <el-button v-if="multipleSelection.length" type="danger" @click="startUserStatus"
            style="margin-left: 20px;width: 100px;" :disabled="currentUser.userStatus === 0">启用</el-button>
      </div>
      <div class="user-table">
        <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="tableData"
          @selection-change="handleSelectionChange" @row-click="handleRowClick">
          <el-table-column type="selection" width="60rem" :selectable="checkSelectable">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="190rem">
          </el-table-column>
          <el-table-column prop="description" label="用户描述" width="190rem">
          </el-table-column>
          <el-table-column prop="createBy" label="来源" width="190rem">
          </el-table-column>
          <el-table-column prop="roleType" label="角色" width="190rem">
            <template slot-scope="scope">
              {{ getRoleTypeName(scope.row.roleType) }}
            </template>
          </el-table-column>
          <el-table-column prop="userStatus" label="状态" width="190rem">

            <template slot-scope="scope">
              <span style="margin-right: 2px;">
                <svg-icon v-if="scope.row.userStatus === 0" icon-class="dotY" />
                <svg-icon v-if="scope.row.userStatus === 1" icon-class="dotN" />
              </span>
              {{ getStatusName(scope.row.userStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="190rem">
          </el-table-column>
          <el-table-column prop="updateTime" label="操作" width="190rem">
            <template slot-scope="row">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" @click="ifChooseRow(row)">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" v-if="showDropdown">
                  <el-dropdown-item command="update" @click="handleUpdateUser">编辑</el-dropdown-item>
                  <el-dropdown-item command="delete" @click="handleDeleteUser" style="color:#F56C6C">删除</el-dropdown-item>
                  <el-dropdown-item command="editPassword" @click="handleEditPassword" style="color:#A1EEBD">修改密码</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
        <div style="margin-top: 10px; float: right;">
          <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagination.pageSize"
            :total="pagination.total" :current-page.sync="pagination.pageNum" @current-change="handlePageChange" />
        </div>
      </div>
    </div>
    <div class="add-user">
      <div >
        <el-dialog title="添加用户" width="30%" :visible.sync="addUserDialogVisible">
          <div>
            <div class="demo-input-suffix">
              <span style="color:red;">* </span>用户名称：
              <el-input placeholder="请输入4-64个字符范围内的用户名" style="width: 55%;" clearable v-model="addUserForm.username" :required="true">
                <!-- 输入的有角色，调接口向后端传值时，需要把角色信息转换回 1/2/3 -->
              </el-input>
            </div>
            <div class="demo-input-suffix">
              <span style="color:red;">* </span>用户角色：
              <el-select placeholder="请选择用户角色" clearable v-model="addUserForm.roleType" 
                @change="changeAddRoleType" popper-class="el-select-dropdown-el-popper"  style="display: inline-block; width: 380px;">
                <el-option " v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                  :required="true" >
                </el-option>
              </el-select>
            </div>
            <div class="demo-input-suffix">
              <span style="color:red;">* </span>用户密码：
              <el-input placeholder="请输入包含数字和字母的用户密码" style="width: 55%;" clearable v-model="addUserForm.password" :required="true"
                :rules="rules.password">
              </el-input>
            </div>
            <div class="demo-input-suffix">
              <span class="demo-input-align"></span>
              用户描述：
              <el-input placeholder="请输入用户信息描述" style="width: 55%;" clearable v-model="addUserForm.description">
              </el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="cancelAddUser">取消</el-button>
            <el-button type="primary" size="small" @click="confirmAddUser">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="update-user">
      <div>
        <el-dialog title="编辑用户" width="30%" :visible.sync="updateUserDialogVisible">
          <div>
            <div class="demo-input-suffix">
              用户名称：
              <el-input placeholder="请编辑用户名称" disabled clearable v-model="updateUserForm.username">
              </el-input>
            </div>
            <div class="demo-input-suffix">
              用户角色：
              <el-select placeholder="请编辑用户角色" clearable v-model="roleTypeName" size="large"
                @change="changeUpdateRoleType">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
            <!-- <div class="demo-input-suffix">
              用户密码：
              <el-input placeholder="请编辑用户密码" clearable v-model="updateUserForm.password" show-password>
              </el-input>
            </div> -->
            <div class="demo-input-suffix">
              用户描述：
              <el-input placeholder="请编辑信息描述" clearable v-model="updateUserForm.description">
              </el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="cancelUpdateUser">取消</el-button>
            <el-button type="primary" size="small" @click="confirmUpdateUser">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <!--修改密码-->
    <el-dialog title="修改用户密码" width="30%" :visible.sync="editPasswordDialogVisible" :close-on-click-modal="false"
      :modal-append-to-body='false' @close="handleCloseDialog">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" label-position="right">
        <el-form-item label="旧密码:" prop="oldpassword">
          <el-input class="demo-input-suffix" v-model="dataForm.oldpassword" type="password" auto-complete="off"
            show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword" label-width="100px">
          <el-input class="demo-input-suffix" v-model="dataForm.newpassword" type="password" auto-complete="off"
            show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkpassword" label-width="100px">
          <el-input class="demo-input-suffix" v-model="dataForm.checkpassword" type="password" auto-complete="off"
            show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 5px;">
        <el-button @click.native="editPasswordDialogVisible = false" type="danger">取消</el-button>
        <el-button type="primary" @click.native="handleUpdataPw">确认</el-button>
      </div>
    </el-dialog>
    <!-- <div class="delete-user">
      <div>
        <el-dialog title="删除用户" width="30%" :visible.sync="deleteUserDialogVisible">
          <div style="color: red;">
            您确定要删除该用户吗
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="cancelDeleteUser">取消</el-button>
            <el-button type="danger" size="small" @click="confirmDeleteUser">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div> -->
  </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators';
export default {
  name: 'UserManage',
  data() {
    /* //定义的旧密码验证是否成功和新密码输入的是否一致
    var checkOldPw = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入旧密码'));
      }
    };
    var checkNewPw = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入密码'));
      }
      if (this.dataForm.newpassword !== value) {
        callback(new Error("密码不一致"));
      } else {
        callback()
      }
    }; */
    return {
      showDropdown: true, // 控制下拉菜单是否显示
      tableData: [],
      //这个是toggle的内容（即勾选前面的小框）
      multipleSelection: [],
      //存储当前行的用户信息
      currentUser: {},
      selectedIds: [],
      searchKeyword: '',
      addUserDialogVisible: false,
      updateUserDialogVisible: false,
      editPasswordDialogVisible: false,
      dataForm: {
        oldpassword: '',
        newpassword: '',
        checkpassword: ''
      },
      dataFormRules: {
        oldpassword: [{
          required: true,
          //validator: checkOldPw,
          trigger: 'blur'
        }],
        newpassword: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }],
        checkpassword: [{
          required: true,
          //validator: checkNewPw,
          trigger: 'blur'
        }]
      },
      //deleteUserDialogVisible: false,
      addUserForm: {
        username: '',
        password: '',
        roleType: '',
        description: ''
      },
      roleTypeName: "",
      roleTypeMap: {},
      updateUserForm: {
        username: '',
        password: '',
        roleType: '',
        description: '',
        roleTypeName: ''
      },
      // 分页信息
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      filterKey: '',
      //角色类型
      options: [],
      //输入框校验规则
      rules: {
        password: [
          { required: true, message: '请输入用户密码' },
          { min: 6, message: '用户密码至少需要 6 个字符' },
          {
            validator: (rule, value, callback) => {
              // 自定义验证规则：包含数字和字母
              const regex = /^(?=.*[a-zA-Z])(?=.*\d).+$/;
              if (!regex.test(value)) {
                callback(new Error('用户密码必须包含数字和字母'));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  //必选项
  validations: {
    addUserForm: {
      username: { required },
      password: { required },
      roleType: { required }
      // 其他字段...
    },
  },
  //更新用户信息时，把角色的数字和中文进行映射
  computed: {
    roleTypeLabel: {
      //注意后端返回的options从1开始而不是从0开始
      get() {
        return this.options[this.updateUserForm.roleType - 1];
      },
      set(value) {
        this.updateUserForm.roleType = Object.keys(this.options).find(key => this.options[key] === value) + 1;
      },
    },
  },
  methods: {
    // 超级管理员用户禁止执行操作
    checkSelectable(row) {
      if (row.username === 'superadmin') {
        return false
      }else{
        return true
      }
    },
    //选中表格的行
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //表格选择项，获得选中的行的信息数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.selectedIds = val.map(row => row.id); // 收集所有选中行的 id
      this.currentUser = val[0]
    },
    //处理行点击事件
    handleRowClick(row) {
      this.currentUser = row; // 将当前行的数据存储在currentUser中
      // 根据 row 的某个值决定是否禁用下拉菜单  
      this.showDropdown = this.isDropdownEnabled(row); 
    },
    isDropdownEnabled(row) {  
      // 根据 row 的某个值来判断下拉菜单是否可用  
      // 示例：如果 row 的某个字段为 'superadmin'，则下拉菜单不可用  
      if (row.username === 'superadmin') {
        return false
      }
      return true
    },  
    // 刷新功能函数
    handleRefresh() {
      this.fetchUserData();
    },
    // 添加用户功能函数，弹出对话框
    handleAddUser() {
      this.addUserDialogVisible = true;
      this.fetchRoleData()
    },
    // 确认添加用户
    confirmAddUser() {
      // 检查必填项
      if (this.$v.addUserForm.$invalid) {
        this.$message('用户名称、用户密码、用户角色为必填项！')
        return
      }
      // 验证密码规则
      const regex = /^(?=.*[a-zA-Z])(?=.*\d).+$/;
      if (!regex.test(this.addUserForm.password)) {
        this.$message('用户密码必须包含数字和字母！');
        return;
      }
      //对象的方法调用并传递参数，url已经在对象的方法中定义了
      this.$userManageApi.addUser(this.addUserForm)
        .then(response => {
          this.addUserDialogVisible = false;
          this.fetchUserData();
          this.addUserForm = {  // 重置添加用户表单
            username: '',
            password: '',
            roleType: '',
            description: ''
          };
          this.$message('用户添加成功！')
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 取消添加用户
    cancelAddUser() {
      this.addUserDialogVisible = false;
      this.addUserForm = {  // 重置添加用户表单
        username: '',
        password: '',
        roleType: 1,
        description: ''
      };
    },
    // 确认更新用户
    confirmUpdateUser() {
      if (this.roleTypeName == '管理者') {
        this.updateUserForm.roleType = 1
      } else if (this.roleTypeName == '开发者') {
        this.updateUserForm.roleType = 2
      } else if (this.roleTypeName == '运维者') {
        this.updateUserForm.roleType = 3
      }
      this.roleTypeName = ''
      const params = {
        id: this.selectedIds[0],
        username: this.updateUserForm.username,
        description: this.updateUserForm.description,
        roleType: this.updateUserForm.roleType
      }
      //console.log(params)
      this.$userManageApi.updateUser(params)
        .then(response => {
          this.updateUserDialogVisible = false;
          this.fetchUserData();
          this.updateUserForm = {  // 重置添加用户表单
            username: '',
            password: '',
            roleType: '',
            description: '',
            roleTypeName: ''
          };
          //this.$message('用户编辑成功！')
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 取消更新用户
    cancelUpdateUser() {
      this.updateUserDialogVisible = false;
      this.updateUserForm = {  // 重置添加用户表单
        username: '',
        password: '',
        roleType: '',
        description: '',
        roleTypeName: ''
      };
    },
    // 确认删除用户
    confirmDeleteUser() {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$userManageApi.deleteUser(this.selectedIds)
          .then(response => {
            this.fetchUserData();
            //this.deleteUserDialogVisible = false;
          })
          .catch(error => {
            console.error(error);
          });
      })
    },
    // 取消删除用户
    cancelDeleteUser() {
      //this.deleteUserDialogVisible = false;
    },
    // 搜索功能函数
    handleSearch() {
      this.pagination.pageNum = 1;  // 搜索时重置页码
      this.fetchUserData();
    },
    // 分页获取用户数据
    fetchUserData() {
      this.$userManageApi.pageGetUserInfo({
        filterKey: this.searchKeyword,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.pageNum
        //...this.pagination
      })
        .then(response => {
          //console.log(response.data.records)
          this.tableData = response.data.records;
          // 更新分页信息
          this.pagination.total = response.data.total;
          this.pagination.pageSize = response.data.size;
          this.fetchRoleData()

          // 遍历 tableData，检查用户状态
          this.tableData.forEach(row => {
            if (row.userStatus === 0 || row.userStatus === 1) {
              // 更新 userStatus 变量
              this.userStatus = row.userStatus;
              // 如果只需要第一个匹配的状态，则添加 break
              // break;
            }
          });
        })
        .catch(error => {
          console.error(error);
        });
    },
    //获取用户角色信息
    fetchRoleData() {
      this.$userManageApi.getAllRole().then(res => {
        this.options = res.data.map(item => ({
          label: item.name,
          value: item.id
        }));
        this.roleTypeMap = res.data.reduce((accumulator, role) => {
          // 将role对象的id作为属性，name作为值，添加到累加器对象中
          accumulator[role.id] = role.name;
          return accumulator;
        }, {}); // 初始化累加器为空对象
      }).catch(err => {
        console.log(err)
      })
    },
    //获取用户角色数字->中文的映射表
    getRoleTypeName(roleType) {
      //scope.row.roleType 表示当前行的 roleType 属性的值
      //this.fetchRoleData()
      return this.roleTypeMap[roleType] || '未知角色';
    },
    //获取用户状态数字-
    getStatusName(userStatus) {
      const statusMap = {
        // 0启用，1禁用
        0: '启用',
        1: '禁用'
      }
      return statusMap[userStatus] || '未知状态'
    },
    handlePageChange(pageNum) {
      this.pagination.pageNum = pageNum;
      this.fetchUserData();
    },
    handleCommand(command) {
      if (command === "update") {
        this.handleUpdateUser()
        this.fetchRoleData()
      } else if (command === "delete") {
        this.handleDeleteUser(this.selectedIds)
      } else if (command === 'editPassword') {
        this.handleEditPassword()
      }
    },
    ifChooseRow(row) {
      //console.log(row)
      this.selectedIds = []
      this.selectedIds.push(row.row.id)
      //console.log(this.selectedIds[0])
    },
    // 删除用户
    handleDeleteUser() {
      //this.deleteUserDialogVisible = true
      this.confirmDeleteUser()
    },
    // 编辑更新用户
    handleUpdateUser() {
      if (this.multipleSelection.length > 1) {
        this.updateUserDialogVisible = false
        this.$message('抱歉，同时只能更新一条用户信息！')
      } else {
        // 将当前行的数据绑定到编辑表单
        this.updateUserForm = { ...this.currentUser };
        //console.log(this.updateUserForm)
        if (this.updateUserForm.roleType === 1) {
          this.roleTypeName = '管理者'
        } else if (this.updateUserForm.roleType === 2) {
          this.roleTypeName = '开发者'
        } else if (this.updateUserForm.roleType === 3) {
          this.roleTypeName = '运维者'
        }
        this.updateUserDialogVisible = true
      }
    },
    //修改用户密码
    handleEditPassword() {
      if (this.multipleSelection.length > 1) {
        this.updateUserDialogVisible = false
        this.$message('抱歉，同时只能修改一条用户密码！')
      } else {
        this.editPasswordDialogVisible = true
      }
    },
    //添加时选择用户角色
    changeAddRoleType(val) {
      this.addUserForm.roleType = val
    },
    //更新时选择用户角色
    changeUpdateRoleType(val) {
      //console.log(val);
      this.updateUserForm.roleType = val
      if (val === 1) {
        this.updateUserForm.roleTypeName = '管理者'
      } else if (val === 2) {
        this.updateUserForm.roleTypeName = '开发者'
      } else if (val === 3) {
        this.updateUserForm.roleTypeName = '运维者'
      }
    },
    // 删除
    deleteSelectedRow() {
      this.confirmDeleteUser()
    },
    //更新用户状态
    updateUserStatus() {
      this.$userManageApi.updateUserStatus({
        "ids": this.selectedIds,
        "status": this.userStatus
      })
        .then(response => {
          this.fetchUserData();
        })
        .catch(error => {
          console.error(error);
        });
    },
    //禁用
    forbidUserStatus() {
      this.$userManageApi.updateUserStatus("0", this.selectedIds)
        .then(response => {
          this.fetchUserData();
        })
        .catch(error => {
          console.error(error);
        });
    },
    //启用
    startUserStatus() {
      this.$userManageApi.updateUserStatus("1", this.selectedIds)
        .then(response => {
          this.fetchUserData();
        })
        .catch(error => {
          console.error(error);
        });
    },
    //关闭时候清空表单
    handleCloseDialog() {
      this.$refs.dataForm.resetFields();
    },
    // 校验旧密码
    checkIsRepeat(oldpw, newpw, success, error) {
      var userId = this.selectedIds[0];
      if (!oldpw) return;
      var params = {
        "id": userId,
        "originalPassword": oldpw,
        "newPassword": newpw
      }
      this.$userManageApi.editUserPassword(params)
        .then(res => {
          //console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    //修改密码，调用接口更改
    handleUpdataPw() {
      var userId = this.selectedIds[0];
      //var formData = new FormData();
      //this.checkIsRepeat()
      /* formData.append("id", userId);
      formData.append("suPwd", this.dataForm.newpassword);
      var that = this;
      this.$refs.dataForm.validate((valid) => {
        if (!valid) return;
        ajaxPostForm(getNativePath2() + "user/updSuPwd", formData, res => {  //以formData格式传给后端，其他属性可以关掉，设置这俩个很重要：processData: false, contentType: false,
          if (res.code == '200') {
            this.$message.success(res.message)
            this.editPasswordDialogVisible = false;
            this.$refs.dataForm.resetFields();
            setTimeout(function () {
              that.quitHander()
            }, 1000)
          } else {
            this.$message.error(res.message)
          }
        }, err => {
          console.log("err", err)
        })
      }) */
      var params = {
        "id": userId,
        "originalPassword": this.dataForm.oldpassword,
        "newPassword": this.dataForm.newpassword
      }
      this.$userManageApi.editUserPassword(params)
        .then(res => {
          if (res && res.code === 200) {
            this.$message.success(res.message)
          }
          this.editPasswordDialogVisible = false;
          this.$refs.dataForm.resetFields();
        })
        .catch(err => {
          console.log(err)
        })
    },
  },
  //在mounted中进行异步操作使用nextTick，不然mounted中会因为组件未完全渲染就已经执行操作而报错
  mounted() {
    this.$nextTick(() => {
      this.fetchUserData();
    })
  }
};
</script>

<style scoped>
/* .demo-input-suffix {
  width: 600px;
} */

.demo-input-suffix .demo-input-align {
  margin-right: 9px; /* 调整这个值直到两个输入框对齐 */
}

.demo-input-suffix .el-select{
  width: 80%;
}

.demo-input-suffix .el-input {
  width: 40%;
}

.el-select-dropdown-el-popper {
  max-width: 20px !important;
}

.user-container {
  display: flex;
  flex-direction: column;
  height: 92vh;
  margin-bottom: 10px;
  background: #eff4f9;;
  background-size: cover;
  padding: 20px;
}

.user-header {
  width: 100%;
  height: 100px;
  margin-top: 6px;
  background-color: #fff;
  border-radius: 20px;
}

.title {
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
  font-size: xx-large;
  padding: 20px;
}

.title-content {
  color: #888888;
  padding-top: 10px;
  font-size:small;
}

.user-operate{
  background-color: #f9fbfd;
  padding: 10px 0;
}

.keyword {
  padding-left: 10px;
}

.user-info {
  margin-top: 10px;
}

.right-menu {
  display: inline;
  float: right;
  margin-right: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.upload {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uploadDiv {
  padding-left: 14px;
}

.el-icon-arrow-down {
  font-size: 12px;
}


::v-deep .el-input {
  width: 26%;
  border-radius: 6px;
  margin-right: 4px;
}

::v-deep .el-image {
  margin-left: 20px;
}

::v-deep .el-input--suffix {
  width: 50%;
  margin-bottom: 5px;
}

::v-deep .el-table thead{
  font-size: initial;
  color: #606266;
  font-weight: 500;
}

::v-deep .el-button {
  border-radius: 10px;
  display: inline-block;
}

::v-deep .el-upload {
  display: block;
}
</style>